<template>
  <div>
    <article class="main-breadcrumb">
      <el-breadcrumb separator="/" class="main-breadcrumb-wrap">
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">织物管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">织物统计报表</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </article>
    <div class="main">
      <el-card class="box-card1">
        <div slot="header" class="clearfix">
          <span>织物归还统计表</span>
        </div>
        <div>
          <div class="cardList-title">统计归还时间</div>
          <el-date-picker v-model="date" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" @change="handleDate" clearable> </el-date-picker>
        </div>
        <div>
          <div class="cardList-title">统计院区</div>
          <el-select v-model="searchForm.hcid" placeholder="请选择统计院区" clearable @change="regionChange">
            <el-option v-for="item in regionArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div>
          <div class="cardList-title">统计科室</div>
          <el-select v-model="searchForm.areaid" placeholder="请选择统计科室" clearable multiple>
            <el-option v-for="item in deptArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div>
          <el-button class="el-icon-s-data" type="primary" style="margin-top: 10px;margin-bottom: 10px; float: right;" @click="handleExport">导出报表</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getArea, getChildList } from "@/api/basic";
export default {
  components: {},
  // 表格数据
  data() {
    return {
      // 查询字段
      searchForm: {
        startdate: "",
        enddate: "",
        hcid: "",
        areaid: [],
      },
      regionArray: [], // 院区集合
      deptArray: [], // 科室集合
      date: [], // 日期范围
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  // 初始化加载
  mounted() {
    // 初始化日期
    this.formatteDate();
    // 获取院区集合
    this.getChildList();
    // 初始化日期（传值）
    if (this.date && this.date.length == 2) {
      this.searchForm.startdate = this.date[0];
      this.searchForm.enddate = this.date[1];
    }
  },

  // 自定义方法
  methods: {
    // 初始格式化日期
    formatteDate() {
      let date = [new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date()];
      const formattedDates = date.map((date) => {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const day = date
          .getDate()
          .toString()
          .padStart(2, "0");
        return `${year}-${month}-${day}`;
      });
      this.date = formattedDates;
    },
    // 获取院区集合
    getChildList() {
      getChildList({}).then((res) => {
        if (res.code == 200) {
          this.regionArray = res.data;
        }
      });
    },
    // 院区下拉切换
    regionChange() {
      this.searchForm.areaid = [];
      this.deptArray = [];

      // 获取科室集合
      this.getDeptList();
    },
    // 获取科室集合
    getDeptList() {
      // if (this.searchForm.hcid === "" || this.searchForm.hcid == null) {
      //   return;
      // }
      getArea({ hcid: this.searchForm.hcid }).then((res) => {
        if (res.code == 200) {
          this.deptArray = res.data;
        }
      });
    },
    // 导出
    handleExport() {
      if (this.searchForm.startdate == "" || this.searchForm.enddate == "") {
        this.$message({
          message: "请选择统计归还时间",
          type: "warning",
        });
        return;
      }
      let token = window.localStorage.getItem("token");
      // let downloadUrl = `http://192.168.5.128/hospital-clothes-manager/public/admin/sendbackReport?token=${token}&startdate=${this.searchForm.startdate}&enddate=${this.searchForm.enddate}&hcid=${this.searchForm.hcid}&areaid=${this.searchForm.areaid}`;  // 本地
      let downloadUrl = `https://clothes.yunbung.com/admin/sendbackReport?token=${token}&startdate=${this.searchForm.startdate}&enddate=${this.searchForm.enddate}&hcid=${this.searchForm.hcid}&areaid=${this.searchForm.areaid}`;
      // window.open(downloadUrl);
      window.location.href = downloadUrl; // 使用下载URL触发文件下载
    },
    // 日期切换
    handleDate() {
      if (this.date && this.date.length == 2) {
        this.searchForm.startdate = this.date[0];
        this.searchForm.enddate = this.date[1];
      } else {
        this.searchForm.startdate = "";
        this.searchForm.enddate = "";
      }

      // this.onSubmit();
    },
  },
};
</script>
<style lang="less" scoped>
.title {
  padding-left: 30px;
  font-size: 25px;
}
.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;
  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;
    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }
    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}
.dialog-footer {
  padding-left: 80px;
  padding-top: 100px;
}
.main {
  display: flex;
  width: 100%;
  // height: 100%;
  .box-card1 {
    width: 31%;
    .clearfix {
      font-size: 1.25rem;
      font-weight: bold;
      letter-spacing: 0.0125em;
    }
    .cardList-title {
      // font-size: 1.25rem;
      margin-top: 5px;
      margin-bottom: 10px;
    }
  }
}
.card-item {
  width: 100%;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  border-bottom: solid 1px #f2f2f2;
  display: flex;
  justify-content: space-between;
}
// .card-item:hover{
//   background-color: #e8e8e8;
// }
.active {
  background-color: #d5e5e4;
}
</style>
